<template>
  <a-divider>
    历史TODO
  </a-divider>
  <a-space direction="horizontal">
    <a-select
        v-model:value="isFinish"
        :size="'middle'"
        style="width: 200px"
        :options="options"
    >
    </a-select>
    <a-date-picker v-model:value="dateValue" />
    <a-input-search
        v-model:value="searchText"
        placeholder="请输入你要搜索的关键字"
        enter-button="Search"
        size="large"
        @search="onSearch"
    />
  </a-space>
  <a-divider/>
  <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"
      :data-source="props.historyTodoList"
      :pagination="pagination">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-card :title="item.title">
          <a-space direction="vertical">
            <a-typography-text :delete="item.isFinish">{{item.todoProfile}}</a-typography-text>
            <div>
              <a-space :size="60" direction="horizontal">
                <a-checkbox v-model:checked="item.isFinish" :disabled="true">
                  完成
                </a-checkbox>
                <a-typography-text keyboard>{{item.createTime}}</a-typography-text>
                <a-popconfirm
                    title="Are you sure delete this TODO?"
                    ok-text="Yes"
                    cancel-text="No"
                    @confirm="confirm(item)"
                    @cancel="cancel"
                >
                  <a-button danger>DELETE</a-button>
                </a-popconfirm>
              </a-space>
            </div>
          </a-space>
        </a-card>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup>
import {message} from "ant-design-vue";
import {ref} from "vue";
import myAxios from "../axios.js";
const isFinish =ref(-1);
const searchText = ref('');
const emit = defineEmits(['update'])
const date = ref('');
const dateValue = ref();
const onSearch = () => {
  console.log(dateValue)
  if(dateValue.value !== undefined){
    date.value = dateValue.value.format('YYYY-MM-DD');
  }
  let url = '/todo/list?isFinish='+isFinish.value+'&searchText=';
  if (searchText !== ''){
    url += searchText.value;
  }
  if(date.value !== undefined && date.value !== ''){
    url += '&date='+date.value;
  }
  myAxios.get(url).then(
      res => {
        if(res.code === 0){
          emit('update',res.data)
          message.success('成功搜索');
        }else{
          message.error("搜索失败")
        }
      }
  ).catch(
      error => {
        console.log("todo搜搜请求出错",error);
      }
  )
}
const options = ref([
  {
    'value':-1,
    'label':'全部'
  },{
    'value':0,
    'label':'未完成'
  },{
    'value':1,
    'label':'完成'
  }
])
const props = defineProps({
  historyTodoList: {
    type: Array,
    default(){
      return [];
    }
  }
})
const pagination = {
  pageSize: 6,
};

const confirm = (item) => {
  myAxios.delete('/todo/delete?todoId='+item.id).then(
      res => {
        if(res.code === 0 && res.data){
          let index = props.historyTodoList.indexOf(item);
          props.historyTodoList.splice(index,1);
          message.success('删除成功')
        }else{
          message.error("删除失败");
        }
      }
  )
};

const cancel = () => {
  message.error('Click on No');
};
</script>

<style scoped>

</style>